<template>
	<view class="page">
		<my-nav-bar search='1' placeholder='请输入城市名' leftIcon="back" @tapsearch="toinputsearch">
		</my-nav-bar>
		<!-- <scroll-view class="scrollList" scroll-y :scroll-into-view="scrollViewId" :style="{height:winHeight + 'px'}">
			<view class="uni-list" >
				<block v-for="(list, key) in lists" :key="key">
					<block v-if="list.data.length">
						<view class="uni-list-cell-divider" :id="list.letter">
							{{list.letter}}
						</view>
						<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list.data" :key="item"
						 :class="list.data.length -1 == index ? 'uni-list-cell-last' : ''">
							<view class="uni-list-cell-navigate">
								{{item}}
							</view>
						</view>
					</block>
				</block>
			</view>
		</scroll-view> -->
		<scroll-view class="scrollList" scroll-y :scroll-into-view="scrollViewId" :style="{height:winHeight-headheight + 'px'}">
			<view class="uni-list">
				<block v-for="(list, key) in lists" :key="key">
					<block v-if="list.items.length">
						<!-- 判断有没有数据，如果没有数据就会不显示 -->
						<view class="uni-list-cell-divider" :id="'uni-list-id-'+list.id">
							<!-- 首字母小标题，设置id用于传值给scroll-into-view滚动到此数据,id只能为字母或者字母和数字的组合-->
							{{list.subtitle}}
						</view>
						<view :class="list.style==1?'my-list-cells':''">
							<view :class="item.style==1?'my-list-cell-out':'uni-list-cell'" v-for="(item,index) in list.items" :key="index"
							 @click="selectcity(item)">
								<!-- 一个首字母下的数据 -->
								<view :class="item.style==1?'my-list-cell-in':'uni-list-cell-navigate'" hover-class="uni-list-cell-hover">
									{{item.name}}
								</view>
							</view>
						</view>
					</block>
				</block>
			</view>
		</scroll-view>

		<!-- 右边所有字母小标题占整个高度 -->
		<!-- <view class="uni-indexed-list-bar" :class="touchmove ? 'active' : ''" @touchstart="touchStart" @touchmove="touchMove"
		 @touchend="touchEnd" @touchcancel="touchCancel" :style="{height:winHeight + 'px'}">
			<text v-for="(list,key) in lists" :key="key" class="uni-indexed-list-text" :class="touchmoveIndex == key ? 'active' : ''"
			 :style="{height:itemHeight + 'px',lineHeight:itemHeight + 'px'}">{{list.name}}</text>
		</view>
		<view class="uni-indexed-list-alert" v-if="touchmove">
			{{lists[touchmoveIndex].name}}
		</view> -->

		<!-- 右边所有字母小标题固定高度 -->
		<view class="theheight" :style="{height: winHeight-headheight + 'px'}">
			<view class="uni-indexed-list-bar" :class="touchmove ? 'active' : ''" @touchstart="touchStart" @touchmove="touchMove"
			 @touchend="touchEnd" @touchcancel="touchCancel" style="height:384px">
				<text v-for="(list,key) in lists" :key="key" class="uni-indexed-list-text" :class="touchmoveIndex == key ? 'active' : ''"
				 style="height:16px;line-Height:16px">{{list.subtitle}}</text>
			</view>

		</view>
		<view class="uni-indexed-list-alert" v-if="touchmove">
			<!-- 触摸到的字母弹窗放大提示 -->
			{{lists[touchmoveIndex].subtitle}}
		</view>
	</view>
</template>

<script>
	var cityData = require("@/components/home-search-city.js");
	import MyNavBar from '@/components/my-nav-bar.vue'

	export default {
		data() {
			return {
				lists: cityData.lists, //城市数据
				touchmove: false, //
				touchmoveIndex: -1, //选中的右边小标题的index，
				itemHeight: 0, //右边单个小标题高度
				winHeight: 0, //可使用窗口高度
				scrollViewId: "", //值应为某子元素id
				titleHeight: 0,
				style: "", //控制两种样式
				headheight: 0, //自己做的导航栏高度
			}
		},
		components: {
			MyNavBar
		},
		onLoad() {
			let winHeight = uni.getSystemInfoSync().windowHeight - this.headheight; //获取可使用窗口高度,屏幕高度(screenHeight) - 导航(tabbar)高度。
			// this.itemHeight = winHeight / 24;//设置右边一个小标题(当前，热门，字母)的高度(占整个高度)
			this.winHeight = winHeight;
			//设置当前页面标题
			uni.setNavigationBarTitle({
				title: 'e.startCity' + '-' + 'e.endCity',
				backgroundColor: "#ccc"
			});

		},
		mounted() {
			this.$nextTick(function() {
				this.headheight = document.getElementsByClassName('my-page-head')[0].offsetHeight;
			})
		},

		methods: {
			//手指触摸动作开始
			touchStart(e) {
				this.touchmove = true;
				let pageY = e.touches[0].pageY; //获取你手指触摸屏幕的位置的Y值
				let index = Math.floor((pageY - this.headheight - (this.winHeight - this.headheight) / 2 + 192) / 16); //算出手指触摸屏幕的位置的index
				//let index = Math.floor((pageY - this.titleHeight) / this.itemHeight);
				//Math.floor()用于返回小于或等于一个给定数字的最大整数。
				let item = this.lists[index]; //获取lists里面第index条的数据
				if (item) { //判断数据是否为空
					this.scrollViewId = 'uni-list-id-' + item.id; //上面设置了设置(:id="list.name"),所以把这个值传给scroll-into-view滚动到此数据
					this.touchmoveIndex = index; //把index传给触摸位置的变量
				}
			},

			//手指触摸后移动
			touchMove(e) {
				let pageY = e.touches[0].pageY;
				let index = Math.floor((pageY - this.headheight - (this.winHeight - this.headheight) / 2 + 192) / 16);
				//let index = Math.floor((pageY - this.titleHeight) / this.itemHeight);
				let item = this.lists[index];
				if (item) {
					this.scrollViewId = 'uni-list-id-' + item.id;
					this.touchmoveIndex = index;
				}
			},

			//手指触摸动作结束
			touchEnd() {
				this.touchmove = false;
				this.touchmoveIndex = -1; //没有触摸，不需要显示
			},

			//手指触摸动作被打断，如来电提醒，弹窗
			touchCancel(e) {
				this.touchmove = false;
				this.touchmoveIndex = -1;
			},

			//把选中的城市名传到上个页面，同时返回上个页面
			selectcity(e) {
				this.getPage(1).city = e.name,
					uni.navigateBack({
						delta: 1,
					})
			},
			toinputsearch() {
				uni.navigateTo({
					url: 'search_city/search_city'
				})
			},

		}
	}
</script>

<style>
	.page {
		/* 
		display: flex;
		flex-direction: row; */
	}

	.scrollList {
		flex: 1;
		height: 100vh;
	}

	/* 改变当前和热门的排列方式 */

	/* 有白底的 */
	/* .my-list-cells{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 20upx 48upx 20upx 20upx;
		font-size: 28upx;
		color: #333333;
		background-color: #FFFFFF;
	}
	.my-list-cell-out{
		width: 33.3333%;
		text-align: center;
		padding: 10upx;
	}
	.my-list-cell-in{{
		border-radius: 8upx;
		
		height: 80upx;
		line-height: 80upx;
		position: relative;
	}
	
	.my-list-cell-in::after {
		position: absolute;
		left: 0upx;
		top: 0upx;
		z-index: 10;
		border: 1px solid #E5E5E5;
		border-radius: 8upx;
		width: 200%;
		height: 200%;
		content: '';
		-webkit-transform: scale(.5);
		transform: scale(.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	} */

	/* 无白底的 */
	.my-list-cells {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0upx 48upx 0upx 20upx;
		font-size: 28upx;
		color: #333333;
		background-color: #f4f5f6;
	}

	.my-list-cell-out {
		width: 33.3333%;
		text-align: center;
		padding: 10upx;
	}

	.my-list-cell-in {
		border-radius: 8upx;
		background-color: #FFFFFF;
		height: 80upx;
		line-height: 80upx;
		position: relative;
	}

	/* 让右边小标题上下居中 */
	.theheight {
		position: fixed;
		z-index: 10;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
	}

	.uni-indexed-list-bar {
		width: 48upx;
		height: 100vh;
		/* background-color: #FFFFFF; */
		display: flex;
		flex-direction: column;

	}

	/* 点击右边小标题，整个标题组背景颜色改变 */
	/* .uni-indexed-list-bar.active {
		background-color: rgb(200, 200, 200);
	} */

	.uni-indexed-list-text {
		color: #999;
		font-size: 22upx;
		text-align: center;
	}

	.uni-indexed-list-bar.active .uni-indexed-list-text {
		color: #333;
	}

	.uni-indexed-list-text.active,
	.uni-indexed-list-bar.active .uni-indexed-list-text.active {
		color: #11A0F8;
	}

	.uni-indexed-list-alert {
		position: absolute;
		z-index: 20;
		width: 160upx;
		height: 160upx;
		left: 50%;
		top: 50%;
		margin-left: -80upx;
		margin-top: -80upx;
		border-radius: 80upx;
		text-align: center;
		line-height: 160upx;
		font-size: 70upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.uni-list-cell-fixed {
		display: flex;
		font-size: 28upx;
		line-height: 32upx;
		color: #999;
		background-color: red;
		padding: 16upx 30upx;
		width: 100%;
	}
</style>
